<template>
	<view class="wrapper">
		<view class="price-box">
			<view class="price-t">
				余额
			</view>
			<view class="price-num">
				￥{{total}}
			</view>
		</view>
		<view class="customer-box">
			<view class="customer-head">
				<view class="customer-li-a">
					客户名称
				</view>
				<view class="customer-li-b">
					手机号码
				</view>
				<view class="customer-li-c">
					消费金额
				</view>
			</view>
			<block v-if="list.length">
				<view v-for="(item,index) in list"  :key="index" class="customer-body" :class="index==(Number(list.length)-1)?'border-bot':''">
					<view class="customer-li-a">
						{{item.username}}
					</view>
					<view class="customer-li-b">
						{{item.mobile}}
					</view>
					<view class="customer-li-c">
						￥{{item.orderInfo.total?item.orderInfo.total:0}}
					</view>
				</view>
			</block>
			<view v-else class="no-more">
				暂无数据
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {	
				list:[],//列表
				total:0,//
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.getList()
		},
		methods: {
			getList(){
				this.api._post('/User/getStoreClient').then(res=>{
					console.log(res)
					if(res.data){
						this.total = res.data.total
						this.list = res.data.list
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	.price-box{
		width: 100%;
		height: 200upx;
		background:linear-gradient(135deg,rgba(255,75,33,1) 0%,rgba(247,0,0,1) 100%);
		.price-t{
			padding-top: 40upx;
			font-size:24upx;
			font-family:PingFangSC;
			text-align: center;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
		.price-num{
			margin-top: 10upx;
			font-size:54upx;
			text-align: center;
			font-family:PingFangSC;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
	}
	.customer-box{
		
		width: 100%;
		.customer-head{
			width: 100%;
			border-bottom: 20upx solid #F6F6F6;
			padding: 0 10upx;
			box-sizing: border-box;
			margin: 0 auto;
			height:100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.customer-li-a,.customer-li-b,.customer-li-c,.customer-li-d{
				font-size:28upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(51,51,51,1);
				width: 33%;
				text-align: center;
			}
		}
		.customer-body{
			width: 100%;
			padding: 0 20upx;
			box-sizing: border-box;
			margin: 0 auto;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.customer-li-a,.customer-li-b,.customer-li-c,.customer-li-d{
				font-size:24upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(102,102,102,1);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 33%;
				text-align: center;
			}
		}
		.border-bot{
			border-bottom: 1upx solid #EEEEEE;
		}
	}
	.no-more{
		margin: 50upx auto;
		text-align: center;
		font-size: 28upx;
		color: #999999;
	}
</style>
